import Home from './pages/home/index';
import Me from './pages/me/index';
import Chat from './pages/chat/index';
import Rank from './pages/rank/index';
import Project from './pages/project/index';
import Search from './pages/search/index';
import Login from './pages/login/index';
import H5 from './pages/h5/index';
import Setting from './pages/setting/index';

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator,CardStyleInterpolators} from '@react-navigation/stack';
import {createBottomTabNavigator,} from '@react-navigation/bottom-tabs';

import Ionicons from 'react-native-vector-icons/Ionicons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import theme from './util/theme';

const title = {
  Home: '首页',
  Chat: '消息',
  Rank: '榜单',
  Me: '我的',
};

const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;

const headerStyle = {
  headerStyle: {
    backgroundColor: '#fff',
    elevation: 0.5,
  },
  headerTitleStyle: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },
  headerTitleContainerStyle: {
    left: TITLE_OFFSET,
    right: TITLE_OFFSET,
  },
};

const screenOptions = {
  headerBackTitleVisible: false,
  cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
  headerBackImage: () => {
    return <AntDesign name="arrowleft" size={20} style={{paddingLeft: 10, color: '#666' }} />;
  },
  headerShown: false,
  ...headerStyle
};

const Tab = createBottomTabNavigator();
function MainTab() {
  return (
    <Tab.Navigator
      screenOptions={({route}) => {
        return {
          tabBarIcon: ({focused, color, size}) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'ios-home' : 'ios-home-outline';
            } else if (route.name === 'Chat') {
              iconName = focused
                ? 'ios-chatbubbles'
                : 'ios-chatbubbles-outline';
            } else if (route.name === 'Me') {
              iconName = focused ? 'ios-person' : 'ios-person-outline';
            } else if (route.name === 'Rank') {
              iconName = focused ? 'ios-flame' : 'ios-flame-outline';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarLabel: title[route.name],
          ...headerStyle
        };
      }}
      tabBarOptions={{
        activeTintColor: theme.brandColor,
        inactiveTintColor: theme.grayColor,
      }}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Chat" component={Chat} />
      <Tab.Screen name="Rank" options={{ title: '榜单' }}  component={Rank} />
      <Tab.Screen name="Me" options={{ title: '我的' }} component={Me} />
    </Tab.Navigator>
  );
}

const mainStack = createStackNavigator()
function MainStack() {
  return (
    <mainStack.Navigator screenOptions={screenOptions}>
      <mainStack.Screen
        options={{ headerShown: false }}
      name="Main" component={MainTab} />
      <mainStack.Screen
        options={{ title: '需求介绍' }}
        name="Project"
        component={Project}
      />
      <mainStack.Screen
        options={{headerShown: false}}
        name="Search"
        component={Search}
      />
      <mainStack.Screen
        name="Setting"
        options={{title: '系统设置'}}
        component={Setting}
      />
      <mainStack.Screen name="H5" component={H5} />
    </mainStack.Navigator>
  )
}

const rootStack = createStackNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <rootStack.Navigator
        mode="modal"
        headerMode="none"
        initialRouteName="Main">
        <rootStack.Screen name="Main" component={MainStack} />
        <rootStack.Screen options={{
          headerShown: false
        }} name="Login" component={Login} />
        <rootStack.Screen name="H5" component={H5} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}
